<template>
	<view class="interflow">
		<view class="desc dFlex jCenter_aCenter">
			<view class="descIcon imgPublic">
				<image :src="logo" mode="widthFix"></image>
			</view>
			<view class="info">
				<view class="title">{{name}}</view>
				<view class="toast">电话 {{tel}}</view>
			</view>
			<view class="gf imgPublic">
				<image src="https://app.gdxixiashi.com/public/images/home/guanfang@2x.png" mode="widthFix"></image>
			</view>
		</view>
		<view class="code imgPublic">
			<image :src="weiixin" mode="widthFix"></image>
		</view>
		<view class="toast2">保存图片微信即可添加客服</view>
		<view class="toast2">客服在线时间：{{work_time}}</view>
		<view class="btns dFlex jAround_aCenter" :style="{
			'padding-bottom':isIos ? 'env(safe-area-inset-bottom)' : '12px'
		}">
			<view class="btn len1 sty1" @click="saveService">保存二维码</view>
		</view>
	</view>
</template>

<script>
	import{
		platformInfo
	} from '@/tool/http.js';
	export default {
		data() {
			return {
				isIos:getApp().globalData.isIos,
				weiixin:'',
				logo:'',
				name:'',
				tel:'',
				work_time:'',
			};
		},
		onShow(){
			this.getPlatformInfo();
		},
		methods:{
			async getPlatformInfo(){
				let res = await platformInfo({});
				console.log(res);
				if(res){
					this.weiixin = res.weiixin;
					this.logo = res.logo;
					this.name = res.name;
					this.tel = res.tel;
					this.work_time = res.work_time;
				}
			},
			
			// 保存图片
			saveService(){
				uni.getSetting({ //获取用户的当前设置
					success: res => {
						if (res.authSetting['scope.writePhotosAlbum']) { //验证用户是否授权可以访问相册
							this.saveImageToPhotosAlbum()
						} else {
							uni.authorize({//重新发起获取授权
								scope: 'scope.writePhotosAlbum',
								success: () => {
									this.saveImageToPhotosAlbum()
								},
								fail: () => {
									uni.showToast({
										title: '请打开保存相册权限，再点击保存相册',
										icon: 'none',
										duration: 2000
									})
									let timer = setTimeout(() => {
										clearTimeout(timer)
										uni.openSetting({ //调起客户端小程序设置界面,让用户开启访问相册
											success: e => {}
										})
									}, 2000)
								}
							})
						}
					}
				})
			},
			saveImageToPhotosAlbum(){
				uni.downloadFile({
					filePath:this.weiixin,
					success: (res) => {
						if (res.statusCode === 200) {
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath,
								success(res) {
									uni.showToast({ title: '保存图片成功！', icon:"success"})
								},
								fail(res) {
									uni.showToast({ title: '保存图片失败！', icon:"fail"})
								}
							})
						}else{
							uni.showToast({
								title:'图片下载失败',
								icon:'error'
							})
						}
					},
					fail:(err)=>{
						uni.showToast({
							title:'图片下载失败',
							icon:'error'
						})
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	page{
		background: white;
	}
	.interflow{
		padding: 24px 5%;
		box-sizing: border-box;
		.btns{
			.btn{
				width:100%;
				padding: 10px 0;
				border-radius: 4px;
				text-align: center;
				border:1px solid #f6f6f6;
			}
			.len1{
				width: 100%;
			}
			
			.sty1{
				color: white;
				background: #0087FC;
				border-color: #0087FC;
			}
			width:100%;
			position: fixed;
			left:0;
			bottom: 0;
			padding: 12px;
			box-sizing: border-box;
		}
		.code{
			width: 65%;
			margin: 60px auto 50px;
		}
		.toast2{
			text-align: center;
			color: #666666;
		}
		.desc{
			width: 100%;
			border: 1px solid #1664FF;
			padding: 18px 45px;
			box-sizing: border-box;
			border-radius: 4px;
			position: relative;
			.gf{
				width: 34px;
				position:absolute;
				top: 0;
				right: 0;
			}
			.info{
				flex: 1;
				font-size: 12px;
				color: #999999;
				.title{
					font-size: 16px;
					color: #313131;
					font-weight:bold;
					margin-bottom: 12px;
				}
			}
			.descIcon{
				width: 64px;
				height: 64px;
				margin-right: 16px;
			}
		}
	}
</style>
